<template>
  <div class="">
    <div class="welcome">
      <h2> OYLAN TEAM </h2>
    </div>
    <swiper :options="swiperOption" ref="mySwiper">
      <swiper-slide v-for="(item,i) in banners" :key="i">
        <img class="image" :src="item.src"></img>
      </swiper-slide>
    </swiper>
    <div class="container">
      <div class="row f2">
        <div class="col-md-6" v-for="(item,i) in list" :key="i">
          <div class="">
            <img :src="item.image" class="img-rounded image">
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <p class="text title col-md-4"> 欧依兰软件开发工作室 </p>
          </div>
          <div class="col-md-5" >
            <p class="text"> 地址: 天津市南开区白堤路荣迁西里10号楼 </p>
          </div>
          <div class="col-md-5" >
            <p class="text"> 电话: 18902123716 | 邮箱: itoldi@126.com </p>
          </div>
          <div class="col-md-2" >
            <p class="text"> 津ICP备19004909号-1</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import json from '../../static/data.json'
  export default {
    name: 'HelloWorld',
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    data() {
      return {
        msg: 'OYLAN TEAM',
        swiperOption: {
          loop: true,
          notNextTick: true,
          autoplay: 3000,
          preloadImages: false,
          pagination: {
            el: '.swiper-pagination',
          },
          paginationClickable: true,
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
        },
        banners: [],
        list: []
      }
    },
    mounted() {
      this.initPage()
    },
    methods: {
      initPage() {
        this.banners = json.banners
        this.list = json.list
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .welcome {
    padding: 15px;
  }

  .image {
    width: 100%;
  }

  .f2 {
    margin-top: 25px;
  }

  .f2 .col-md-6 {
    margin-bottom: 25px;
  }

  .footer{
    background: #F5F5F5;
    padding-top: 20px;
  }

  .footer .text {
    font-size: 13px;
  }
  .footer .title {
    font-size: 18px;
    font-weight: 600;
  }
</style>
